<template>
  <section class="top-nav-wrapper">
    <section class="top-nav">
      <ul class="category-list">
        <router-link :to="`/category/${item.key}`" class="top-nav_item" v-for="item in categories">
          <li>{{ item.label }}</li>
        </router-link>
      </ul>
      <ul class="options">
        <li class="top-nav_item" v-if="!$store.getters.getUserInfo">
          <n-icon size="18" style="margin-right: 3px;">
            <UserAvatarFilled />
          </n-icon>
          <router-link to="/login">
            <span>登录 | 注册</span>
          </router-link>
        </li>
        <n-popconfirm
          negative-text="取消"
          positive-text="确认"
          @positive-click="handleConfirmSignOut"
          v-else
        >
          <template #trigger>
            <li class="top-nav_item">
              <n-icon size="18" style="margin-right: 3px;">
                <UserAvatarFilled />
              </n-icon>
              欢迎 {{ $store.getters.getUserInfo.nick_name || $store.getters.getUserInfo.user_name || '用户' }}
            </li>
          </template>
          确认退出吗？
        </n-popconfirm>
        <li class="top-nav_item" v-permission:click="() => $pushRoute('/order')">
          <n-icon size="18" style="margin-right: 3px;">
            <MdReorder />
          </n-icon>我的订单
        </li>
        <router-link to="/cart" class="top-nav_item">
          <n-icon size="18" style="margin-right: 3px;">
            <ShoppingCart />
          </n-icon>
          <span style="margin-top: 2px">
            购物车
            <n-tag
              v-if="$store.getters.getUserInfo"
              type="success"
              style="height: 20px;"
              size="small"
              round
            >{{ $store.getters.getCartCount }}</n-tag>
          </span>
        </router-link>
      </ul>
    </section>
  </section>
  <section class="head-content">
    <router-link to="/mall">
      <section class="logo-block">
        <n-icon size="86" color="#18a058">
          <StoreMallDirectoryTwotone />
        </n-icon>
        <span class="mall-title">Cloud米米</span>
      </section>
    </router-link>

    <section class="search">
      <n-input
        size="large"
        round
        placeholder="搜索"
        @keypress.enter="() => $pushRoute(`/search/${keyword}`)"
        v-model:value="keyword"
      >
        <template #suffix>
          <router-link :to="`/search/${keyword}`">
            <n-icon style="vertical-align: -3px;padding: 0 10px;">
              <IosSearch />
            </n-icon>
          </router-link>
        </template>
      </n-input>
    </section>
  </section>
</template>


<script setup lang="ts">
import $store from '../../store';
import { StoreMallDirectoryTwotone } from '@vicons/material';
import { IosSearch, MdReorder } from '@vicons/ionicons4';
import { UserAvatarFilled, ShoppingCart } from '@vicons/carbon';
import { $pushRoute } from "../../utils/global";
import { getCategories } from '../../api/productApi';
import { ref } from "@vue/reactivity";

const categories = getCategories();
let keyword = ref("");

function handleConfirmSignOut() {
  $store.dispatch('clearUserInfo');
}

</script>
<style scoped>
.top-nav {
  min-width: 1240px;
  width: 1240px;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #b0b0b0;
  margin: auto;
}

.top-nav-wrapper {
  background-color: #3d3d3d;
  min-width: 1240px;
  height: 35px;
}

.category-list,
.options {
  display: flex;
}

.top-nav_item {
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.top-nav_item + .top-nav_item::before {
  content: "|";
  color: #b0b0b0;
  margin-right: 8px;
}

.top-nav_item:hover {
  color: #a7faa7aa;
  cursor: pointer;
}

.head-content {
  flex: 1;
  width: 1226px;
  min-width: 1226px;
  margin: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-block {
  display: flex;
  align-items: flex-end;
}

.mall-title {
  font-size: 32px;
  margin-bottom: 4px;
  color: #3d3d3d;
}

.search {
  margin-top: 20px;
}
</style>
